import { defineStore } from 'pinia';
import { store } from '../index';
import themeVar from '@/styles/theme/defaultTheme.module.scss';

interface MenuThemeState {
  layoutMenuColor: string;
  layoutMenuBgColor: string;
  layoutMenuActiveColor: string;
  layoutMenuActiveBgColor: string;
  layoutSubmenuBgColor: string;
  layoutMenuColumnColor: string;
  layoutMenuColumnBgColor: string;
  layoutMenuColumnActiveColor: string;
  layoutMenuColumnActiveBgColor: string;
}

interface HeaderThemeState {
  layoutHeaderColor: string;
  layoutHeaderBgColor: string;
  layoutHeaderHoverBgColor: string;
}

interface ThemeState extends MenuThemeState, HeaderThemeState {
  primaryColor: string;
  layoutLogoColor: string;
}

export const useThemeStore = defineStore('theme', {
  state: (): ThemeState => {
    return {
      primaryColor: themeVar.primaryColor,
      layoutHeaderColor: themeVar.layoutHeaderColor,
      layoutLogoColor: themeVar.layoutLogoColor,
      layoutHeaderBgColor: themeVar.layoutHeaderBgColor,
      layoutHeaderHoverBgColor: themeVar.layoutHeaderHoverBgColor,
      layoutMenuColor: themeVar.layoutMenuColor,
      layoutMenuBgColor: themeVar.layoutMenuBgColor,
      layoutMenuActiveColor: themeVar.layoutMenuActiveColor,
      layoutMenuActiveBgColor: themeVar.layoutMenuActiveBgColor,
      layoutSubmenuBgColor: themeVar.layoutSubmenuBgColor,
      layoutMenuColumnColor: themeVar.layoutMenuColumnColor,
      layoutMenuColumnBgColor: themeVar.layoutMenuColumnBgColor,
      layoutMenuColumnActiveColor: themeVar.layoutMenuColumnActiveColor,
      layoutMenuColumnActiveBgColor: themeVar.layoutMenuColumnActiveBgColor
    };
  },
  persist: {
    key: '__app-theme__'
  },
  getters: {
    getPrimaryColor(): string {
      return this.primaryColor;
    },
    getMenuBgColor(): string {
      return this.layoutMenuBgColor;
    },
    getMenuTheme(): MenuThemeState {
      return {
        layoutMenuColor: this.layoutMenuColor,
        layoutMenuBgColor: this.layoutMenuBgColor,
        layoutMenuActiveColor: this.layoutMenuActiveColor,
        layoutMenuActiveBgColor: this.layoutMenuActiveBgColor,
        layoutSubmenuBgColor: this.layoutSubmenuBgColor,
        layoutMenuColumnColor: this.layoutMenuColumnColor,
        layoutMenuColumnBgColor: this.layoutMenuColumnBgColor,
        layoutMenuColumnActiveColor: this.layoutMenuColumnActiveColor,
        layoutMenuColumnActiveBgColor: this.layoutMenuColumnActiveBgColor
      };
    },
    getHeaderBgColor(): string {
      return this.layoutHeaderBgColor;
    },
    getHeaderTheme(): HeaderThemeState {
      return {
        layoutHeaderColor: this.layoutHeaderColor,
        layoutHeaderBgColor: this.layoutHeaderBgColor,
        layoutHeaderHoverBgColor: this.layoutHeaderHoverBgColor
      };
    },
    getLogoColor(): string {
      return this.layoutLogoColor;
    }
  },
  actions: {
    setPrimaryColor(color: string) {
      this.primaryColor = color;
    },
    setMenuTheme(theme: Partial<MenuThemeState>) {
      if (theme.layoutMenuColor) {
        this.layoutMenuColor = theme.layoutMenuColor;
      }
      if (theme.layoutMenuBgColor) {
        this.layoutMenuBgColor = theme.layoutMenuBgColor;
      }
      if (theme.layoutMenuActiveColor) {
        this.layoutMenuActiveColor = theme.layoutMenuActiveColor;
      }
      if (theme.layoutMenuActiveBgColor) {
        this.layoutMenuActiveBgColor = theme.layoutMenuActiveBgColor;
      }
      if (theme.layoutSubmenuBgColor) {
        this.layoutSubmenuBgColor = theme.layoutSubmenuBgColor;
      }
      if (theme.layoutMenuColumnColor) {
        this.layoutMenuColumnColor = theme.layoutMenuColumnColor;
      }
      if (theme.layoutMenuColumnBgColor) {
        this.layoutMenuColumnBgColor = theme.layoutMenuColumnBgColor;
      }
      if (theme.layoutMenuColumnActiveColor) {
        this.layoutMenuColumnActiveColor = theme.layoutMenuColumnActiveColor;
      }
      if (theme.layoutMenuColumnActiveBgColor) {
        this.layoutMenuColumnActiveBgColor = theme.layoutMenuColumnActiveBgColor;
      }
    },
    setHeaderTheme(theme: Partial<HeaderThemeState>) {
      if (theme.layoutHeaderColor) {
        this.layoutHeaderColor = theme.layoutHeaderColor;
      }
      if (theme.layoutHeaderBgColor) {
        this.layoutHeaderBgColor = theme.layoutHeaderBgColor;
      }
      if (theme.layoutHeaderHoverBgColor) {
        this.layoutHeaderHoverBgColor = theme.layoutHeaderHoverBgColor;
      }
    },
    setLogoColor(color: string) {
      this.layoutLogoColor = color;
    },
    reset() {
      this.primaryColor = themeVar.primaryColor;
      this.layoutHeaderColor = themeVar.layoutHeaderColor;
      this.layoutLogoColor = themeVar.layoutLogoColor;
      this.layoutHeaderBgColor = themeVar.layoutHeaderBgColor;
      this.layoutHeaderHoverBgColor = themeVar.layoutHeaderHoverBgColor;
      this.layoutMenuColor = themeVar.layoutMenuColor;
      this.layoutMenuBgColor = themeVar.layoutMenuBgColor;
      this.layoutMenuActiveColor = themeVar.layoutMenuActiveColor;
      this.layoutMenuActiveBgColor = themeVar.layoutMenuActiveBgColor;
      this.layoutSubmenuBgColor = themeVar.layoutSubmenuBgColor;
      this.layoutMenuColumnColor = themeVar.layoutMenuColumnColor;
      this.layoutMenuColumnBgColor = themeVar.layoutMenuColumnBgColor;
      this.layoutMenuColumnActiveColor = themeVar.layoutMenuColumnActiveColor;
      this.layoutMenuColumnActiveBgColor = themeVar.layoutMenuColumnActiveBgColor;
    }
  }
});

export const useThemeStoreWithOut = () => {
  return useThemeStore(store);
};
